<template>
  <div class="app-container">
    <px-form ref="queryRef" class="custom-form-ui-new" :model="queryParams" :inline="true" label-width="68px">
      <px-form-item label="类别">
        <px-select v-model="queryParams.category" clearable placeholder="请选择类别">
          <px-option v-for="item in categoryList" :key="item.code" :label="item.name" :value="item.code" />
        </px-select>
      </px-form-item>
      <px-form-item label="品名">
        <px-select v-model="queryParams.name" clearable placeholder="请选择品名">
          <px-option v-for="item in nameList" :key="item.code" :label="item.name" :value="item.code" />
        </px-select>
      </px-form-item>
      <px-form-item label="年份" prop="year">
        <px-select v-model="queryParams.year" clearable placeholder="请选择年份">
          <px-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item>
        <px-button type="primary" @click="getList">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
        <!-- <px-button type="primary" plain @click="handleExport">导出</px-button> -->
      </px-form-item>
    </px-form>
    <px-table v-loading="loading" :header-cell-style="{ background: '#e7eefb', color: '#000' }" border :data="tableList">
      <template #empty>
        <px-empty />
      </template>
      <px-table-column type="index" label="序号" width="60" align="center" />
      <px-table-column label="类别" align="center" prop="specificationName" min-width="70" />
      <px-table-column label="品名" align="center" prop="sparePartName" min-width="100" />
      <px-table-column label="规格" align="center" prop="supplyModel" min-width="70" />
      <px-table-column label="单位" align="center" prop="sparePartUnitDesc" min-width="70" />
      <px-table-column label="PO总量" align="center" prop="poNumberCount" min-width="70" />
      <px-table-column label="收货数量" align="center" prop="inTotalQuantity" />
      <px-table-column label="收货比例" align="center" prop="percentage" />
      <px-table-column label="收货金额" align="center" prop="quantity" />
      <px-table-column label="未入库数量" align="center" prop="stock" />
      <px-table-column label="总出库" align="center" prop="outTotalQuantity" />
      <px-table-column label="使用率" align="center" prop="usePercentage" />
      <px-table-column label="现场库存" align="center" prop="currentStock" />
      <px-table-column label="1月">
        <px-table-column prop="janInNum" label="进库" width="60" />
        <px-table-column prop="janOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="2月">
        <px-table-column prop="febInNum" label="进库" width="60" />
        <px-table-column prop="febOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="3月">
        <px-table-column prop="marInNum" label="进库" width="60" />
        <px-table-column prop="marOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="4月">
        <px-table-column prop="aprInNum" label="进库" width="60" />
        <px-table-column prop="aprOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="5月">
        <px-table-column prop="mayInNum" label="进库" width="60" />
        <px-table-column prop="mayOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="6月">
        <px-table-column prop="juneInNum" label="进库" width="60" />
        <px-table-column prop="juneOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="7月">
        <px-table-column prop="julyInNum" label="进库" width="60" />
        <px-table-column prop="julyOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="8月">
        <px-table-column prop="augInNum" label="进库" width="60" />
        <px-table-column prop="augOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="9月">
        <px-table-column prop="sepInNum" label="进库" width="60" />
        <px-table-column prop="sepOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="10月">
        <px-table-column prop="octInNum" label="进库" width="60" />
        <px-table-column prop="octOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="11月">
        <px-table-column prop="novInNum" label="进库" width="60" />
        <px-table-column prop="novOutNum" label="出库" width="60" />
      </px-table-column>
      <px-table-column label="12月">
        <px-table-column prop="decInNum" label="进库" width="60" />
        <px-table-column prop="decOutNum" label="出库" width="60" />
      </px-table-column>
    </px-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "FFULedger"
});
import { PxMessage, PxMessageBox } from "px-ui";
import { querySparePartPoGroup, querySparePartPoSummary, querySparePartPoSummaryCount } from "@/api/machineReport";
import { queryDictData } from "@/api/common";
import { getCurrentInstance, onMounted, reactive, ref, toRefs, nextTick } from "vue";
import { getToken } from "@/utils/auth";
const { VITE_FANRUAN_BASE_URL } = import.meta.env;
import dayjs from "dayjs";

const { proxy }: any = getCurrentInstance();
const categoryList = ref([]);
const nameList = ref([]);
const yearList = ref([]);
let ym = new Date();
let tmpList = [];
for (var i = -5; i < 5; i++) {
  let y = ym.getFullYear();
  tmpList.push({
    label: y + i,
    value: y + i
  });
}
yearList.value = tmpList;

const loading = ref(true);

const data = reactive<Record<string, any>>({
  queryParams: {
    year: dayjs().year(),
    pageNum: 1,
    pageSize: 20
  },
  tableList: [],
  total: 0,
  colCount: 12
});

const { queryParams, total, tableList, colCount } = toRefs(data);

const getSelectList = async () => {
  let res = await querySparePartPoGroup({ pageSize: 99999 });
  let ct = [],
    sp = [];
  res.specificationList.forEach(item => {
    let keys = Object.keys(item);
    let name = keys[0];
    let code = item[name];
    ct.push({
      code,
      name
    });
  });
  categoryList.value = ct;
  res.sparePartList.forEach(item => {
    let keys = Object.keys(item);
    let name = keys[0];
    let code = item[name];
    sp.push({
      code,
      name
    });
  });
  nameList.value = sp;
};
/** 列表 */
const getList = async () => {
  loading.value = true;
  // 获取特定年份的开始的第一天
  const startTime = dayjs().year(queryParams.value.year).startOf("year").format("YYYY-MM-DD");
  // 获取特定年份的最后一天
  const endTime = dayjs().year(queryParams.value.year).endOf("year").format("YYYY-MM-DD");
  const res: any = await querySparePartPoSummaryCount({
    billNumList: [],
    specificationCode: queryParams.value.category,
    sparePartCode: queryParams.value.name,
    startTime: startTime + " 00:00:00",
    endTime: endTime + " 00:00:00"
  });
  tableList.value = res;
  loading.value = false;
};

onMounted(async () => {
  getSelectList();
  getList();
});

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value.category = "";
  queryParams.value.name = "";
  queryParams.value.year = dayjs().year();
  proxy.resetForm("queryRef");
  getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  // if (queryParams.value.year) {
  //   let Token = getToken().accessToken || "";
  //   let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=machine%252F%25E5%258C%2596%25E6%25BB%25A4%25E5%25AF%25BF%25E5%2591%25BD%25E7%25BB%25BC%25E5%2590%2588%25E6%258A%25A5%25E8%25A1%25A8.cpt&token=${Token}&startDate=${dateRange.value[0]}&endDate=${dateRange.value[1]}&count=${colCount.value}&format=excel&extype=simple`;
  //   window.location.href = url;
  // } else {
  //   PxMessage({
  //     message: "请选择时间后再导出",
  //     type: "error"
  //   });
  // }
};
</script>
